<script setup lang="js">
import {computed, onMounted, ref} from "vue";
import {listPublicPost, listFavoritePostByUserId} from "@/api/merchantPost";
import {getCurrentUserInfo} from "@/api/user";
import {useRouter} from "vue-router";

const router = useRouter()
onMounted(() => {
  getCurUserId();
  selectPost()
});

//获取当前登录用户
const curUserId = ref(0)
const getCurUserId = () => {
  getCurrentUserInfo().then(res => {
    curUserId.value = res.data.id
  })
}

// ------------帖子类别选择---------------
const isAllChecked = ref(true);
const isNewProductChecked = ref(false);
const isSeasonalChecked = ref(false);
const isDiscountChecked = ref(false);
const isOthersChecked = ref(false);
const isAnnouncementChecked = ref(false);
const isExclusiveChecked = ref(false);
const handleAllChange = (status) => {
  isAllChecked.value = status;
  if (status) {
    isNewProductChecked.value = false;
    isSeasonalChecked.value = false;
    isDiscountChecked.value = false;
    isOthersChecked.value = false;
    isExclusiveChecked.value = false;
    isAnnouncementChecked.value = false;
  }
  updateCheckedTags();
};
const handleNewProductChange = (status) => {
  if (status) isAllChecked.value = false;
  isNewProductChecked.value = status;
  updateCheckedTags();
};
const handleSeasonalChange = (status) => {
  if (status) isAllChecked.value = false;
  isSeasonalChecked.value = status;
  updateCheckedTags();
};
const handleDiscountChange = (status) => {
  if (status) isAllChecked.value = false;
  isDiscountChecked.value = status;
  updateCheckedTags();
};
const handleAnnouncementChange = (status) => {
  if (status) isAllChecked.value = false;
  isAnnouncementChecked.value = status;
  updateCheckedTags();
};
const handleOthersChange = (status) => {
  if (status) isAllChecked.value = false;
  isOthersChecked.value = status;
  updateCheckedTags();
};
const handleExclusiveChange = (status) => {
  if (status) isAllChecked.value = false;
  isExclusiveChecked.value = status;
  updateCheckedTags();
};
const checkedTags = ref([])
const updateCheckedTags = () => {
  checkedTags.value = [];
  if (isNewProductChecked.value) checkedTags.value.push('新品上新');
  if (isSeasonalChecked.value) checkedTags.value.push('季节限定');
  if (isDiscountChecked.value) checkedTags.value.push('促销活动');
  if (isOthersChecked.value) checkedTags.value.push('其他');
  if (isExclusiveChecked.value) checkedTags.value.push('粉丝福利');
  if (isAnnouncementChecked.value) checkedTags.value.push('店铺公告');
};
// -----------获取帖子---------------
const pageSize = ref(9)
const curPost = ref({})
const posts = ref([])
const filteredPosts = computed(() => {
  if (checkedTags.value.length === 0) return posts.value;
  return posts.value.filter(post => {
    if (!post.postType) return false;
    return checkedTags.value.includes(post.postType);
  });
});
// ----------侧边栏帖子选择--------------
const activeTab = ref('all');
const selectPost = () => {
  if (activeTab.value === 'all') {
    listPublicPost(pageSize.value).then(res => {
      if (res.data) {
        posts.value = res.data;
      } else {
        console.error("获取所有帖子失败");
      }
    }).catch(err => {
      console.error("获取帖子时发生错误:", err);
    });
  } else {
    const query = {
      pageSize: pageSize.value,
      userId: curUserId.value
    }
    listFavoritePostByUserId(query).then(res => {
      if (res.data) {
        posts.value = res.data;
      } else {
        console.error("获取收藏帖子失败");
      }
    }).catch(err => {
      console.error("获取收藏帖子时发生错误:", err);
    });
  }
}
// ----------显示完整帖子内容--------------
const fullTextVisible = ref(false);
const showFullText = (post) => {
  curPost.value = post;
  fullTextVisible.value = true;
}
// ------------前往店铺详情页--------------
const toStorePage = (id) => {
  router.push(`/user/storeDetailsPage/${id}`)
}
</script>

<template>
  <el-container style="background-color: white; min-height: 100vh; border-radius: 10px">
    <el-aside class="aside">
      <el-tabs tab-position="left" class="post-tabs" v-model="activeTab" @tab-change="selectPost">
        <el-tab-pane label="所有店铺动态" name="all"></el-tab-pane>
        <el-tab-pane label="收藏店铺动态" name="favorite"></el-tab-pane>
      </el-tabs>
    </el-aside>
    <el-main>
      <!--类型筛选-->
      <div class="tag-container">
        <el-check-tag
            type="primary"
            :checked="isAllChecked"
            @change="handleAllChange"
            class="type-tag"
        >
          全部
        </el-check-tag>
        <el-check-tag
            type="primary"
            :checked="isNewProductChecked"
            @change="handleNewProductChange"
            class="type-tag"
        >
          新品介绍
        </el-check-tag>
        <el-check-tag
            type="primary"
            :checked="isSeasonalChecked"
            @change="handleSeasonalChange"
            class="type-tag"
        >
          季节限定
        </el-check-tag>
        <el-check-tag
            type="primary"
            :checked="isDiscountChecked"
            @change="handleDiscountChange"
            class="type-tag"
        >
          促销活动
        </el-check-tag>
        <el-check-tag
            type="primary"
            :checked="isExclusiveChecked"
            @change="handleExclusiveChange"
            class="type-tag"
        >
          粉丝福利
        </el-check-tag>
        <el-check-tag
            type="primary"
            :checked="isAnnouncementChecked"
            @change="handleAnnouncementChange"
            class="type-tag"
        >
          店铺公告
        </el-check-tag>
        <el-check-tag
            type="primary"
            :checked="isOthersChecked"
            @change="handleOthersChange"
            class="type-tag"
        >
          其他
        </el-check-tag>
      </div>
      <!--帖子卡片-->
      <div class="posts-wrapper">
        <el-card class="post-card" shadow="hover" v-for="post in filteredPosts" @click="showFullText(post)">
          <p class="post-title">{{post.title}}</p>
          <p class="store-name" @click="toStorePage(post.store.id)">——{{post.store.name}}</p>
          <el-divider />
          <p class="post-text">{{post.contentText}}</p>
          <div class="post-img-wrapper" v-if="post.mediaUrls">
            <img v-if="post.mediaUrls[0]" style="width: 100px; height: 100px" :src="post.mediaUrls[0]" alt=""/>
            <img v-if="post.mediaUrls[1]" style="width: 100px; height: 100px" :src="post.mediaUrls[1]" alt=""/>
            <img v-if="post.mediaUrls[2]" style="width: 100px; height: 100px" :src="post.mediaUrls[2]" alt=""/>
          </div>
          <p class="publishDate">{{post.publishedAt}}</p>
        </el-card>
        <!--  此处添加加载更多选项   -->
      </div>
      <!--帖子详情-->
      <el-dialog
          v-model="fullTextVisible"
          title="帖子详情"
          width="500"
          align-center
      >
        <p class="post-title">{{curPost.title}}</p>
        <p><strong>帖子内容:</strong>{{curPost.contentText}}</p>
        <div class="post-img-wrapper" v-if="curPost.mediaUrls">
          <el-image
              v-if="curPost.mediaUrls[0]"
              style="width: 100px; height: 100px"
              :src="curPost.mediaUrls[0]"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="curPost.mediaUrls"
              show-progress
              fit="cover"
          />
          <el-image
              v-if="curPost.mediaUrls[1]"
              style="width: 100px; height: 100px"
              :src="curPost.mediaUrls[1]"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="curPost.mediaUrls"
              show-progress
              fit="cover"
          />
          <el-image
              v-if="curPost.mediaUrls[2]"
              style="width: 100px; height: 100px"
              :src="curPost.mediaUrls[2]"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="curPost.mediaUrls"
              show-progress
              fit="cover"
          />
        </div>
        <p><strong>营业时间：</strong>{{curPost.store.openingHours}}</p>
        <p><strong>店铺地址：</strong>{{curPost.store.address}}</p>
        <p><strong>联系方式:</strong> {{ curPost.store.contactInfo }}</p>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<style scoped lang="scss">
// --------------交互变量定义--------------
$primary: #409EFF;
$primary-light: #e6f7ff;
$shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
$shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.12);
$transition: all 0.3s ease;

// --------------侧边栏样式--------------
.aside{
  border-radius: 10px;
  width: 10%;
  background-color: white;
  transition: $transition;

  &:hover {
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
  }
}
.post-tabs {
  height: 80px;
  margin-top: 40px;
}
::v-deep .el-tabs__item {
  font-size: 18px;
  margin-bottom: 20px;
  line-height: 30px;
  transition: $transition;

  &:hover {
    color: $primary;
    transform: translateX(5px);
  }

  &.is-active {
    color: $primary;
    font-weight: 600;
    background-color: $primary-light;
    border-radius: 4px 0 0 4px;
  }
}

// --------------帖子类型标签样式-------------
.tag-container{
  display: flex;
  flex-wrap: wrap;  // 改为wrap避免溢出
  width: 800px;
  margin: 20px auto;

  // 增加标签容器交互
  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
}
.type-tag{
  height: 32px;  // 增大点击区域
  line-height: 32px;
  font-size: 18px;
  font-family: 思源圆体, sans-serif;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 0 15px;  // 增加内边距
  border-radius: 6px;  // 增加圆角
  transition: $transition;

  // 标签交互强化
  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 3px 10px rgba(64, 158, 255, 0.2);
  }

  &:checked {
    transform: scale(1.05);
  }
}

// --------------帖子卡片样式--------------
.posts-wrapper{
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
}
.post-card{
  border-radius: 10px;
  min-height: 400px;
  width: 30%;
  margin: 10px;
  transition: $transition;  // 卡片交互

  &:hover {
    transform: translateY(-8px);
    box-shadow: $shadow-hover;
  }
}

// --------------帖子内容样式--------------
.post-title{
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  transition: $transition;

  &:hover {
    color: $primary;
    transform: scale(1.02);
  }
}
.store-name{
  cursor: pointer;
  margin-right: 40px;
  font-size: 14px;
  height: 15px;
  text-align: right;
  transition: $transition;

  &:hover {
    color: $primary;
    transform: scale(1.05);
    text-decoration: underline;
  }
}
.post-text{
  height: 100%;
  text-indent: 2em;
}
.post-img-wrapper{
  display: flex;
  justify-content: space-around;

  // 图片交互
  img {
    border-radius: 6px;
    transition: $transition;

    &:hover {
      transform: scale(1.1);
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    }
  }
}
.post-text{
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: $transition;
}
.post-text:hover {
  color: $primary;
  cursor: pointer;
  letter-spacing: 0.5px;  // 增加文字交互
}
.post-type{
  margin-right: 5px;
  font-size: 12px;
}
.publishDate {
  margin-top: 50px;
  text-align: right;
  font-size: 12px;
  color: #888;
  transition: $transition;

  .post-card:hover & {
    color: $primary;
  }
}

// --------------弹窗样式优化--------------
::v-deep .el-dialog {
  border-radius: 12px;
  overflow: hidden;
  transition: $transition;

  &:hover {
    box-shadow: $shadow-hover;
  }
}

::v-deep .el-dialog__header {
  background-color: $primary-light;
  padding: 15px 20px;

  .el-dialog__title {
    font-size: 20px;
    color: $primary;
  }
}

::v-deep .el-dialog__body {
  padding: 20px;

  .post-title {
    text-align: left;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #eee;
  }
}

// --------------响应式优化（不改变功能）--------------
@media (max-width: 992px) {
  .tag-container {
    width: 100%;
    padding: 0 15px;
  }

  .post-card {
    width: 45%;  // 中等屏幕显示两列
  }
}

@media (max-width: 768px) {
  .aside {
    width: 100%;
    height: auto;
  }

  ::v-deep .el-tabs {
    width: 100%;

    .el-tabs__nav {
      display: flex;
      width: 100%;
    }

    .el-tabs__item {
      flex: 1;
      text-align: center;
      margin-bottom: 0;
    }
  }

  .post-card {
    width: 100%;  // 小屏幕单列显示
  }
}
</style>